<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../resources/js/jquery-1.6.js"></script>
<script type="text/javascript" src="../../resources/js/jquery.form.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/jquery.validate.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/additional-methods.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-ui-1.8.11.custom.min.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-ui-timepicker-addon.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/css/start/jquery-ui-1.8.10.custom.css"/>
    <style type="text/css">
        * {
            font-family: Verdana;
            font-size: 96%;
        }

        label {
            width: 10em;
            float: left;
        }

        label.error {
            float: none;
            color: red;
            padding-left: .5em;
            vertical-align: top;
        }

        p {
            clear: both;
        }

        .submit {
            margin-left: 12em;
        }

        em {
            font-weight: bold;
            padding-right: 1em;
            vertical-align: top;
        }
    </style>
<style type="text/css">
	.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
	.ui-timepicker-div dl{ text-align: left; }
	.ui-timepicker-div dl dt{ height: 25px; }
	.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
	.ui-timepicker-div td { font-size: 50%; }
</style>
<script type="text/javascript">
	$(document).ready(function() {
        $(".dateClass").datepicker({
            dateFormat : "yy-mm-dd",
            minDate : 0,
            yearRange: '-0:+2',
            //maxDate: new Date(20, 1 - 1, 1),
            changeMonth : true,
            changeYear : true
        });

        $(".removeBut").button({
                icons:{primary:'ui-icon-minus',secondary:'ui-icon-minusthick'}
        });

        $(".nextBut").button({
                icons:{primary:'ui-icon-plus',secondary:'ui-icon-plusthick'}
        });
        
        $(".timeClass").timepicker({
                showSecond: false,
                timeFormat: 'hh:mm:ss',
                onClose: function(e) {
                    var startTime, endTime;
                    if ($(this).attr('name').indexOf('start') >= 0) {
                        startTime = $(this);
                        endTime = $(this.nextElementSibling);
                    }
                    if ($(this).attr('name').indexOf('end') >= 0) {
                        endTime = $(this);
                        startTime = $(this.previousElementSibling);
                    }

                    if (startTime.val().trim() != "" && endTime.val().trim() != "" && startTime.val() > endTime.val()) {
                        //endTime.css('background-color','red');
                        endTime.val(startTime.val());
                    }

                }

            });
        
        $( "#radio" ).buttonset();
        
        $("#ccity").autocomplete({
            source: function(request, response) {
                jQuery.ajax({
                    url : "/search/cities",
                    dataType : "json",
                    data : {
                        term : request.term
                        //groupId : $("#groupId").val();
                    },
                    success : function(data) {
                        response(jQuery.map(data, function(item) {
                            return {
                                label: item.ruName,
                                value: item.ruName,
                                id: item.idCity
                            }
                        }))
                    }
                })
            },
            select: function(event, ui) {
                if (ui.item) {
                    putCityId(ui.item.id);
                }                
            },
            minLength : 2,
            open : function() {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function() {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });
        
        $(".removeBut").click(function(obj) {
			removeDateInputter(obj.target);
		});
        
     	$('#editForm').ajaxForm(function(e){
    			window.parent.closeIframe();
    	});


     
        $("#editForm").validate({
            submitHandler: function() {
                postSubmit();
                window.parent.closeIframe();
            },
            rules: {               
                city: {
                	min: 1,
                    required: true
                }
            },
            messages: {
            city: {
            	min: "Please select the city",
                required: true
            }
            }
        });
	});
	
	function addDateInputter(workDate, startTime, endTime){
		
		//$("#nextBut").replaceWith("<input class=\"removeBut\" type=\"button\" name=\"next\" value=\"-\" onclick=\"removeDateInputter()\"/><br/>");
		$("#cdate").append("<div class = \"concreteDate\" >");
		$("#cdate .concreteDate:last-child").append("<input class=\"dateClass\" type=\"text\" readonly=\"readonly\" name=\"date\"/>");
		$("#cdate .concreteDate:last-child").append("<input class=\"timeClass\" type=\"text\" readonly=\"readonly\" name=\"startTime\"/>");
		$("#cdate .concreteDate:last-child").append("<input class=\"timeClass\" type=\"text\" readonly=\"readonly\" name=\"endTime\"/>");
		$("#cdate .concreteDate:last-child").append("<input class=\"removeBut\" type=\"button\" name=\"next\" value=\"-\" />");
		$("#cdate .concreteDate:last-child").append("<input class=\"nextBut\" type=\"button\" name=\"next\" value=\"+\" onclick=\"addDateInputter()\"/> <br//>");
		
		
		$(".removeBut").click(function(obj) {
			removeDateInputter(obj.target);
		});
		$(".dateClass").datepicker({
            dateFormat : "yy-mm-dd",
            minDate : 0,
            yearRange: '-0:+2',
            //maxDate: new Date(20, 1 - 1, 1),
            changeMonth : true,
            changeYear : true
        });
		$(".timeClass").timepicker({
                showSecond: false,
                timeFormat: 'hh:mm:ss',
                onClose: function(e) {
                    var startTime, endTime;
                    if ($(this).attr('name').indexOf('start') >= 0) {
                        startTime = $(this);
                        endTime = $(this.nextElementSibling);
                    }
                    if ($(this).attr('name').indexOf('end') >= 0) {
                        endTime = $(this);
                        startTime = $(this.previousElementSibling);
                    }

                    if (startTime.val().trim() != "" && endTime.val().trim() != "" && startTime.val() > endTime.val()) {
                        //endTime.css('background-color','red');
                        endTime.val(startTime.val());
                    }

                }

            });
        $(".removeBut").button({
                icons:{primary:'ui-icon-minus',secondary:'ui-icon-minusthick'}
        });

        $(".nextBut").button({
                icons:{primary:'ui-icon-plus',secondary:'ui-icon-plusthick'}
        });
		
	};
	
	function removeDateInputter(obj){
		if ($(".concreteDate").size()>1){
		    $(obj).parent(".concreteDate").remove();
		}
	};
	
	 function putCityId(idCity) {
         $("#idCity").val(idCity);
     }
	 
     
    

</script>
</head>
<body>
<form class="cmxform" id="editForm" method="post" action="/saveEditedWork?idWork=${work.idWork} ">
    <fieldset>
        <!--<legend>Edit information about work</legend>-->
        
        <p>
    		<label for="ccity">Город *</label>
    		<em></em><input id="ccity" title="Начните печатать название города и выберите Ваш город из выпавшего списка."
    		 name="visicity" value="${work.city.ruName }" size="25" class="required"/>
    		<input id="idCity" value="${work.city.idCity }" type="hidden" name="city" />
		</p>
		
		<p>
            <label for="cwage">Цена *</label>
            <em></em><input id="cwage" name="wage" value="${work.wage }" size="25" class="required"/> грн.
        </p>
		
		 <p>
            <label for="cjobTypesEnd">Тип работы *</label><em></em>
            <div id="radio">
            <c:forEach var="jobType" items="${jobTypes}">
            	<c:choose>
					<c:when test="${jobType.idJob == work.jobType.idJob }">
                		<input id="radio${jobType.idJob }" checked="checked" type="radio" name="jobType" value="${jobType.idJob}" class="required" />
                	</c:when>
                <c:otherwise>
						<input id="radio${jobType.idJob }" type="radio" name="jobType" value="${jobType.idJob}" class="required" />
</c:otherwise>
</c:choose>
			<label for="radio${jobType.idJob}" >${jobType.title}</label>
            </c:forEach>
            <input id="cjobTypesEnd" type="hidden"/>
            </div>
        </p>	
        
		<p>
			<label for="cabout">О работе *</label>
			<em></em><textarea id="cabout" name="about">${work.about}</textarea>
		</p>

       <p>
			<label for="cdate">Даты *</label>
			<em>*</em>
			<div id="cdate">
				<c:forEach var="workDay" items="${work.schedule}">
					<div class="concreteDate">
					<input class="dateClass" type="text" value="${workDay.workDate }" readonly="readonly" name="date"/><input class="timeClass" type="text" value="${workDay.startTime }" readonly="readonly" name="startTime"/><input class="timeClass" type="text" value="${workDay.endTime }" readonly="readonly" name="endTime"/><input class="removeBut" type="button" name="next" value="-"/><input class="nextBut" type="button" name="next" value="+" onclick="addDateInputter()"/><br/>
					</div>
				</c:forEach>
			</div>
		</p>

       <input class="submit" type="submit" value="Submit" />

    </fieldset>
</form>
</body>
</html>